<template>
    <div class="advertisement-list">
        <div class="search-content">
            <div class="form-item">
                <span class="form-item-label">广告名称：</span>
                <el-input class="search-content-input" v-model="searchContent.adName" placeholder="广告名称"></el-input>
            </div>
            <div class="form-item">
                <span class="form-item-label">发布时间：</span>
                <el-date-picker
                        v-model="searchContent.addTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="form-item">
                <span class="form-item-label">状态：</span>
                <el-select v-model="searchContent.status" placeholder="请选择状态">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="resetSearchData">重置</el-button>
        </div>
        <div class="search-list">
            <el-table :data="adList" border :height="oHeight" @selection-change="handleSelectionChange">
                <el-table-column
                        fixed="left"
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="广告名称"
                        min-width="120">
                    <template slot-scope="scope">
                        <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;">
                            <span style="width: 80%">{{scope.row.adName}}</span>
                            <div v-if="scope.row.ap_class != 1" class="preview-wrapper">
                                <img src="./img/preview.png">
                                <div class="preview">
                                    <img :src="scope.row.adPreviewImg">
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="ap_name"
                        label="所属广告位"
                        min-width="120"></el-table-column>
                <el-table-column
                        align="center"
                        prop="ap_name"
                        label="类别"
                        min-width="120">
                    <template slot-scope="scope">
                        <span>{{computeCateText(scope.row.ap_class)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="开始时间"
                        min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.startTime | dateFormatter('YYYY-MM-DD hh:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="结束时间"
                        min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.endTime | dateFormatter('YYYY-MM-DD hh:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="views"
                        label="点击率"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="addStaff"
                        label="广告主"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        min-width="90">
                    <template slot-scope="scope">
                        <a class="btn-cell" href="javascript:;" @click="handleShowDrawer(scope.row.id)">编辑</a>
                        <span>&nbsp;|&nbsp;</span>
                        <a class="btn-cell" href="javascript:;" @click="showDeleteDialog(scope.row.id)">删除</a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <a class="btn-bottom" @click="showDeleteDialog" href="javascript:;">删除</a>
                    <a class="btn-bottom" href="javascript:;" @click="handleShowDrawer">新增广告</a>
                </div>
                <div class="paginationOne">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchContent.currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="searchContent.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                :before-close="handleClose"
                title="提示"
                :visible="dialogVisible"
                width="30%">
            <span>{{dialogMsg}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="confirmDelete">确 定</el-button>
            </span>
        </el-dialog>
        <el-drawer
            @close="onClose"
            :title="title"
            ref="elDrawer"
            :destroy-on-close="true"
            :append-to-body="true"
            size="85%"
            :visible.sync="drawer"
            :direction="direction">
            <advertisement-add-edit @addEditSuccess="onAddEditSuccess" @cancel="onCancel" :id="editedAdId"></advertisement-add-edit>
        </el-drawer>
    </div>
</template>

<script>
	import { resize } from "@/common/js/height.js";
	import {dateFormatter} from "../../../../common/js/util";
	import AdvertisementAddEdit from './advertisement-add-edit';

	export default {
		data() {
			return {
				title: '',
				editedAdId: 0,
				drawer: false,
				direction: 'rtl',
				options: [
					{label: '全部', value: ''},
					{label: '未过期', value: 0},
					{label: '已过期', value: 1}
				],
				oHeight: 800,
				searchContent: {
					adName: '',
                    status: '',
					addTime: '',
					currentPage: 1,
					pageSize: 10
				},
				needDeleteAd: [],
				dialogVisible: false,
				dialogMsg: '',
				adList: [],
				total: 0,
				multipleSelection: []
			}
		},
		computed: {

		},
		methods: {
			onClose() {
				this.editedAdId = 0;
            },
			onAddEditSuccess() {
				if (this.editedAdId) {
					// 编辑
                    this.getListData();
                } else {
					this.search();
                }
            },
			computeCateText(val) {
				switch (val) {
                    case 0:
                    	return '图片'
                        break
                    case 1:
	                    return '文字'
	                    break
					case 2:
						return '幻灯'
						break
					case 3:
						return 'Flash'
						break
				}
            },
			onCancel() {
				this.editedAdId = 0;
				this.$refs.elDrawer.closeDrawer();
            },
			handleShowDrawer(id) {
				if (typeof id == 'number') {
					this.editedAdId = id;
					this.title = '编辑广告';
                } else {
					this.title = '新增广告';
                }
				this.drawer = true;
            },
			showDeleteDialog(id) {
				if (typeof id == 'number') {
					this.needDeleteAd.push(id);
				} else {
					if (this.multipleSelection.length) {
						this.needDeleteAd = this.multipleSelection.map(function(item) {
							return item.id;
						});
                    } else {
						this.$message({
                            type: 'error',
                            message: '请选择要删除的广告'
                        });
						return;
                    }
				}
				if (this.needDeleteAd.length == 1) {
					this.dialogMsg = '删除此广告？';
				} else {
					this.dialogMsg = '删除选中的所有广告？';
				}
				this.dialogVisible = true;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleClose() {
				this.cancelDelete();
			},
			cancelDelete() {
				this.dialogVisible = false;
				this.dialogMsg = '';
				this.needDeleteAd = [];
			},
			confirmDelete() {
				this.deleteAd(this.needDeleteAd.join(','));
				this.cancelDelete();
			},
			deleteAd(id) {
				this.$http.post('/admin/advertising/index.php?act=advManager&op=deleteAdvInfo', {
					adv_id: id
				}).then(res => {
					if (res.code == 1) {
						this.search();
					} else {
						alert(res.msg);
					}
				})
			},
			resetSearchData() {
				this.searchContent.adName = '';
				this.searchContent.status = '';
				this.searchContent.addTime = '';
			},
			search() {
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleSizeChange(pageSize) {
				this.searchContent.pageSize = pageSize;
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleCurrentChange(page) {
				this.searchContent.currentPage = page;
				this.getListData();
			},
			getListData() {
				const data = {};
				data.currentPage = this.searchContent.currentPage;
				data.eachNum = this.searchContent.pageSize;
				if (typeof this.searchContent.status == 'number') {
					data.past = this.searchContent.status;
                }
				data.search_name = this.searchContent.adName;
				if (this.searchContent.addTime) {
					/*const startAddMS = this.searchContent.addTime[0].getTime();
					const endAddMS = this.searchContent.addTime[1].getTime();
					if (startAddMS == endAddMS) {
						data.add_time_from = dateFormatter('YYYY-MM-DD hh:mm:ss', startAddMS);
						data.add_time_to = dateFormatter('YYYY-MM-DD hh:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
					} else {
						data.add_time_from = dateFormatter('YYYY-MM-DD hh:mm:ss', this.searchContent.addTime[0]);
						data.add_time_to = dateFormatter('YYYY-MM-DD hh:mm:ss', this.searchContent.addTime[1]);
					}*/
					data.add_time_from = dateFormatter('YYYY-MM-DD', this.searchContent.addTime[0]);
					data.add_time_to = dateFormatter('YYYY-MM-DD', this.searchContent.addTime[1]);
				}
				this.$http.post('/admin/advertising/index.php?act=advManager&op=Index', data).then(res => {
					if (res.code == 1) {
						if (res.data && res.data.list && res.data.list.length) {
							this.adList = res.data.list.map(item => {
								let obj = {
									id: item.adv_id * 1,
									adName: item.adv_title,
									ap_name: item.ap_name,
									ap_class: item.ap_class * 1,
									startTime: item.adv_start_date * 1000,
									endTime: item.adv_end_date * 1000,
									views: item.click_num,
									addStaff: item.member_name ? item.member_name : '管理员添加'
								}
								if (item.adv_content && item.adv_content.adv_pic) {
									obj.adPreviewImg = item.adv_content.adv_pic
                                }
								else if (item.adv_content && item.adv_content.adv_slide_pic) {
									obj.adPreviewImg = item.adv_content.adv_slide_pic
                                }
								else if (item.adv_content && item.adv_content.flash_swf) {
									obj.adPreviewImg = item.adv_content.flash_swf
                                }
								return obj
							});
							this.total = parseInt(res.data.total);
						} else {
							this.adList = [];
							this.total = 0;
						}
					}
					else if (res.code == 1000) {
						this.adList = [];
						this.total = 0;
					}
					else {
						alert(res.msg);
					}
				})
			}
		},
		mounted() {
			resize(this)
		},
		created() {
			this.getListData();
		},
        components: {
	        AdvertisementAddEdit
        },
		name: "advertisement-list"
	}
</script>

<style lang="scss" scoped>
    .search-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        &-input {
            width: 200px;
        }
        .form-item {
            .form-item-label {
                font-size: 14px;
            }
            display: flex;
            align-items: center;
            /deep/.el-range-separator {
                box-sizing: content-box;
            }
        }
    }
    .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .btn-bottom {
        background: #409EFF;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
    }
    .btn-bottom + .btn-bottom {
        margin-left: 15px;
    }
    .btn-cell {
        color: #409eff;
        cursor: pointer;
    }
    .preview-wrapper {
        width: 25px;
        height: 25px;
        position: relative;
        display: flex;
        cursor: pointer;
    }
    .preview-wrapper>img {
        width: 25px;
        height: 25px;
    }
    .preview-wrapper>.preview {
        position: absolute;
        left: 0;
        top: 100%;
        display: none;
        background: #FFF;
        padding: 5px;
        border: solid 5px #71CBEF;
        z-index: 1000;
    }
    .preview-wrapper:hover>.preview {
        display: flex;
    }
    .preview-wrapper:hover>.preview>img {
        width: 375px;
    }
    /deep/ .el-drawer.rtl {
        overflow-y: auto;
        top: 50px;
        height: auto;
    }
    /deep/ .el-table .cell {
        overflow: visible;
    }
</style>
